<template>
  <el-row
      type="flex"
      align="middle"
      justify="center"
      style="width:100vw; height: 100vh; background-color:#f1f1f1;">
    <el-row
        type="flex"
        justify="space-between"
        style="width: 70vw; height: 70vh;">

      <el-col :span="12" style="display: flex;align-items: center;justify-content: center;">
        <div style="width: 100%;height: 100%;border-radius: 20px 0 0 20px;background-color:#6d5953;">
          <div style="transform: translateY(20px);height:0;z-index: 999;">
            <h1 style="text-align: center;color: white;">灵犀智医</h1>
            <h2 style="text-align: center;color: white;">数字科技赋能传统医药文化传承</h2>
          </div>
          <img
              src="../assets/login.jpg"
              alt="login"
              style="object-fit: cover;border-radius: 20px 0 0 20px;">
        </div>
      </el-col>

      <el-col
          :span="12"
          style="display: flex;">
        <el-card
            shadow="never"
            style="
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0 20px 20px 0;">
          <h2 style="text-align: center;color: #6d5953;line-height: 3;">登录</h2>
          <el-form :model="loginForm"
                   ref="loginForm"
                   :hide-required-asterisk="true"
                   label-width="100px"
                   style="margin-right: 100px;">
            <el-form-item label="账号" prop="account" :rules="[{ required: true, message: '账号不能为空' }]">
              <el-input v-model.number="loginForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
              <el-input show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role" :rules="[{ required: true, message: '角色不能为空' }]">
              <el-radio-group v-model="loginForm.role">
                <el-radio label="管理员">管理员</el-radio>
                <el-radio label="用户">用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="验证码" prop="code" :rules="[{ required: true, message: '验证码不能为空' }]">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="12">
                  <img :src="codeSrc" alt=" " @click="getCode" style="cursor: pointer;height: 40px;">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%;" type="primary" @click="submitForm('loginForm')">提交</el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%;" @click="resetForm('loginForm')">重置</el-button>
            </el-form-item>
            <span style="float: right;transform:translateY(-15px);">
          <el-link @click="toRegister">没有账号？前往注册</el-link>
        </span>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import api from "@/api";
import {setCache} from "@/utils/useCache";

export default {
  name: 'AboutView',
  data() {
    return {
      loginForm: {
        account: '',
        password: '',
        role: '',
        code: '',
      },
      codeSrc: ''
    }
  },
  mounted() {
    this.getCode()
  },
  methods: {
    toRegister() {
      this.$router.push('/register');
    },
    getCode() {
      api.file.generateImageCode().then((res) => {
        const blob = new Blob([res.data], {type: 'image/png'});
        this.codeSrc = URL.createObjectURL(blob);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login() {
      if (this.loginForm.role === '管理员') {
        api.admin.adminLogin(this.loginForm.account, this.loginForm.password, this.loginForm.code).then((res) => {
          let {code, data, message} = res.data
          this.$message({type: code === 200 ? 'success' : 'error', message: message, duration: 1000})
          if (code === 200) {
            setCache("USERINFO", JSON.stringify(data.user))
            setCache("TOKEN", JSON.stringify(data.token))
            setCache("CURRENT_MENU", "'/manage/home")
            this.$router.push("/manage")
          }
        })
      }
      if (this.loginForm.role === '用户') {
        api.user.userLogin(this.loginForm.account, this.loginForm.password, this.loginForm.code).then((res) => {
          let {code, data, message} = res.data
          this.$message({type: code === 200 ? 'success' : 'error', message: message, duration: 1000})
          if (code === 200) {
            setCache("USERINFO", JSON.stringify(data.user))
            setCache("TOKEN", JSON.stringify(data.token))
            setCache("CURRENT_MENU", "'/user/home")
            this.$router.push("/user")
          }
        })
      }
    }
  },
}
</script>
